<template>
  <a-card :bordered="false">
    <a-tabs v-model="activeKey" @change="handleTabsChange">
      <a-tab-pane
        key="1"
      >
       <span slot="tab">
          <a-icon type="reconciliation" />
           历史最优策略建议
        </span>
        <!-- <h2 style="color: rgb(7, 132, 211)">历史最优：1.2 最优PUE服务器功耗：332W</h2> -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form-model
            ref="formModel"
            :model="form"
            layout="inline"
            :rules="{
              name: [
                {
                  validator: validators.noWhitespace(),
                  trigger: 'change'
                },
                {
                  validator: validators.noIllegalString(),
                  trigger: 'change'
                },
                {
                  max: 10,
                  message: '长度在 1 到 10 个字符',
                  trigger: 'change'
                },
              ]
            }"
          >
            <a-row
              type="flex"
              justify="end"
            >
              <a-col
                :md="6"
                :sm="8"
              >
                <a-form-model-item
                  prop="name"
                  label="服务器名称"
                >
                  <a-input autocomplete="off" v-model="form.name" />
                </a-form-model-item>
              </a-col>
              <span
                style="float: left; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-col
                  :md="12"
                  :sm="24"
                >
                  <a-button
                    type="primary"
                    @click="loadData(true)"
                    icon="search"
                    style="margin-left: 21px"
                  >查询</a-button>
                  <a-button
                    @click="resetSearchForm"
                    icon="reload"
                    style="margin-left: 8px"
                  >重置</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form-model>
        </div>
        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          :columns="columns"
          :dataSource="gDataSource"
          :pagination="gPagination"
          @change="gHandleTableChange"
        >
          <span
            slot="sortCol"
            slot-scope="text, record, index"
          >
            {{
              (gPagination.current - 1) * gPagination.pageSize +
              parseInt(index) +
              1
            }}
          </span>
        </a-table>
      </a-tab-pane>

      <a-tab-pane
        key="2"
      >
      <span slot="tab">
          <a-icon type="meh" />
           历史最优策略仿真
        </span>
        <div style="
            display: inline-block;
            vertical-align: top;
            padding-right: 20px;
          ">
          历史最优策略仿真结果：
        </div>
        <div style="display: inline-block">
          <div
            v-for="(d, i) in nodeSimulateData"
            :key="i"
            style="margin-bottom: 15px"
          >
            <span style="display: block">{{ d.name }} ——</span>
            <span style="display: block">历史最优策略建议：</span>
            <span style="display: block"
              >服务器功耗 =
              {{ d.simulateMetric + "W, 数据中心PUE = " + (d.simulateValue ? parseFloat(d.simulateValue).toFixed(2) : 0.00) }}</span
            >
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane
        key="3"
      >
       <span slot="tab">
          <a-icon type="like" />
           最优策略建议
        </span>
        最优策略建议为：{{
          (optimumData.metricXCnName ? optimumData.metricXCnName.replace('(W)', '') : '') +
          " = " +
          optimumData.optimalMetric +
          "W, 数据中心PUE = " +
          (optimumData.optimalValue ? parseFloat(optimumData.optimalValue).toFixed(2) : 0.00)
        }}
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";
  // import DetailModal from './modules/DetailModal'
  // import ConfigModal from './modules/ConfigModal'

  export default {
    name: "F0403",
    mixins: [GwListMixin],
    components: {
      // DetailModal,
      // ConfigModal,
    },
    data() {
      return {
        // 表头
        columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "服务器名称",
          dataIndex: "name",
        },
        {
          title: "电源状态",
          dataIndex: "powerStatusCnName",
        },
        {
          title: "带外管理IP",
          dataIndex: "ipmiIp",
        },
        {
          title: "管理网IP",
          dataIndex: "mgmIp",
        },
        {
          title: "数据中心",
          dataIndex: "region",
        },
        {
          title: "功耗",
          dataIndex: "powerConsumption",
          customRender: value => value ? (value + 'W') : '',
        },
        {
          title: "数据中心PUE",
          dataIndex: "historyValue",
          customRender: value => value ? (parseFloat(value).toFixed(2)) : '',
        }, ],
        datacenterId: "",
        datacenterList: [],
        url: {
          list: "/analysis/pageNodeHistory",
          optimum: "/analysis/optimum",
          pageNodeSimulate: "/analysis/pageNodeSimulate",
          datacenterList: "/asset/pageDatacenter",
        },
        optimumData: {},
        nodeSimulateData: [],
        form: {
          name: "",
        },
        activeKey: '1',
      };
    },
    mounted() {
      this.handleTabsChange();
    },
    methods: {
      loadOptimumData() {
        gPostAction(this.url.optimum, {}).then((res) => {
          this.optimumData = res.data;
        });
      },
      loadNodeSimulateData() {
        gPostAction(this.url.pageNodeSimulate, {}).then((res) => {
          this.nodeSimulateData = res.data.list;
        });
      },
      loadData(isDoSearch) {
        this.$refs.formModel.validate(error => {
          if (!error) { return }
          this.gQueryParam.name = this.form.name;
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1;
            this.gPagination.current = 1;
          }
          gPostAction(this.url.list, this.gQueryParam).then((res) => {
            const data = res.data;
            if (data && data.list) {
              this.gDataSource = data.list;
              this.gPagination.total = data.totalCount;
            }
          });
        })
      },
      // loadDatacenter() {
      //   gPostAction(this.url.datacenterList, {}).then((res) => {
      //     const data = res.data;
      //     if (data && data.list) {
      //       this.datacenterList = data.list;
      //     }
      //   });
      // },
      handleDetail(data) {
        this.$refs.detailModal.showModal();
      },
      handleConfig(data) {
        this.$refs.configModal.config(data);
      },
      resetSearchForm() {
        this.form.name = "";
        this.$refs.formModel.resetFields()
      },
      handleTabsChange() {
        let e = this.activeKey
        if (e === '1') {
          this.form.name = ''
          this.loadData()
        } else if (e === '2') {
          this.loadNodeSimulateData()
        } else if (e === '3') {
          this.loadOptimumData()
        }
      },
    },
  };
</script>
